<template>
  <el-carousel indicator-position="outside" >
    <el-carousel-item v-for="item in pictureLoop" :key="item.id">
      <img :src="item.idView">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'ImageNav',
  data() {
    return {
      pictureLoop: [
                {id:0,idView:"https://xh.eplantonline.com/img/banner/banner1.jpg"},
                {id:1,idView:"https://xh.eplantonline.com/img/banner/banner3.jpg"},
                {id:2,idView:require("../statics/images/banner3.jpg")},
                {id:3,idView:require("../statics/images/banner1.jpg")}            
            ]
    }
  },
  
  
}
</script>

<style scoped>
  /* 图片下面位置标识栏 */
  .el-carousel img{
    /* background-color: blueviolet; */
    width: 100%;
    height: 100%;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #357ee4;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #07f57e;
  }
</style>